<!--HomeSwipe 首页轮播图 -->
<template>
  <view :class="customClass">
    <swiper
      indicator-color="rgba(255,255,255,.36)"
      indicator-active-color="#23E6D8"
      indicator-dots="white"
      :autoplay="!!autoplay"
      :duration="500"
      :interval="autoplay"
      class="HomeSwipe"
      v-if="imgList.length"
    >
      <swiper-item v-for="(item, index) in imgList" :key="index">
        <zm-image :lazy-load="false" @click="handleJump(item)" custom-class="HomeSwipe-img" :src="item.imageUrl" />
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
  import jumpMixin from '@/mixins/jumpMixins.ts'
  import ZmImage from '@/commons/ZmImage/index.vue'
  export default {
    name: 'home-swipe',
    components: { ZmImage },
    mixins: [jumpMixin],
    props: {
      classification: {
        type: [String, Number],
        required: true
      },
      cinemaId: [String, Number],
      customClass: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        autoplay: 3000,
        imgList: [],
        loading: true
      }
    },
    methods: {
      getDataList() {
        // #ifdef MP-ALIPAY
        this.imgList = [
          {
            type: '2',
            imageUrl: 'https://public-oss-file.zmaxfilm.com/applet/img/film-oxygen-uniapp/alipay-banner3.png'
          },
          {
            mallCommodityId: '23035',
            type: '1',
            imageUrl: 'https://public-oss-file.zmaxfilm.com/applet/img/film-oxygen-uniapp/alipay-banner1.png'
          },
          {
            mallCommodityId: '23033',
            type: '1',
            imageUrl: 'https://public-oss-file.zmaxfilm.com/applet/img/film-oxygen-uniapp/alipay-banner2.png'
          }
        ]
        // #endif

        // #ifndef MP-ALIPAY
        this.imgList = []
        this.loading = true
        const d = {
          classification: this.classification
        }
        if (this.cinemaId) {
          d.cinemaId = this.cinemaId
        }
        uni.$api.banner
          .bannerList(d)
          .then((res) => {
            this.loading = false
            this.imgList = res
          })
          .catch(() => {
            this.loading = false
          })
        // #endif
      }
    }
  }
</script>
<style lang="scss" scoped>
  .HomeSwipe {
    width: 100%;
    height: 388rpx;
    border-radius: 20rpx;
    overflow: hidden;
  }
  .mall-swiper .HomeSwipe {
    height: 340rpx;
  }
  .home-swiper .HomeSwipe {
    height: 300rpx;
  }
</style>

<style lang="scss">
  .hs-ske {
    .van-skeleton__avatar {
      width: 100% !important;
      height: 388rpx !important;
    }
  }
</style>
